<!--单行商品列表,左右切换显示-->
<template>
  <div class="container-fuild product">
    <div class="product-frame">
      <div class="contol-frame" v-if="!isMobile">
        <div class="contol-panel" v-if="scollBtn" @click="scoll('left')">
          <van-icon
            name="arrow-left"
            style="margin-right: 2px"
            :color="isLeft ? '#676766' : '#c8c9cc'"
          />
        </div>
      </div>
      <div class="product-frame-panel" ref="pageNav">
        <div
          class="product-panel"
          v-for="(item, index) in productList"
          :key="'pro' + index"
          ref="product-panel"
          :style="isMobile ? 'min-width:50%' : 'min-width:25%'"
        >
          <div class="product-fast">
            <div class="product-img">
              <nuxt-link
                :to="
                  '/product/' +
                  item.id +
                  '/' +
                  tool.urlCheckForMenuTitle(item.title)
                "
              >
                <van-image class="img" fit="cover" lazy-load :src="item.pic" />
              </nuxt-link>

              <div class="icon-panel icon ac-bg" @click="proCollection(index)">
                <van-icon name="like-o" size="0.8rem" />
              </div>
              <div class="discount-frame" v-if="item.prop_suks != undefined">
                <div
                  class="discount-panel"
                  v-if="
                    item.prop_suks.length > 0 &&
                    item.price != item.prop_suks[0].discount_price
                  "
                >
                  <p class="discount-label">-</p>
                  <p class="discount">
                    {{
                      (10 - parseFloat(item.prop_suks[0].discount)).toFixed(2) *
                      10
                    }}%
                  </p>
                </div>
              </div>
            </div>
            <nuxt-link
              :to="
                '/product/' +
                item.id +
                '/' +
                tool.urlCheckForMenuTitle(item.title)
              "
            >
              <div class="product-main">
                <p class="product-title co-light">
                  {{ item.title }}
                </p>
                <p class="product-price" v-if="item.prop_suks">
                  <span
                    style="color: red; margin-right: 0.5rem; font-size: 0.5rem"
                    v-if="
                      item.prop_suks.length > 0 &&
                      item.price != item.prop_suks[0].discount_price
                    "
                    >$ {{ item.prop_suks[0].discount_price }}</span
                  >
                  <span
                    v-if="
                      item.prop_suks.length > 0 &&
                      item.price != item.prop_suks[0].discount_price
                    "
                    style="
                      text-decoration: line-through;
                      color: #676766;
                      font-size: 0.3rem;
                    "
                    >$ {{ item.price }}</span
                  >
                  <span
                    v-else-if="item.prop_suks.length > 0"
                    style="font-size: 0.5rem"
                    >$ {{ item.price }}</span
                  >
                </p>
                <p class="product-price" v-else>
                  {{ item.price }}
                </p>
                <van-rate
                  color="#ffd21e"
                  size="0.7rem"
                  :value="parseFloat(item.stars)"
                  readonly
                />
              </div>
              <div class="btn-frame">
                <div class="btn-panel">ADD TO BAG</div>
              </div>
            </nuxt-link>
          </div>
        </div>
      </div>
      <div class="contol-frame" v-if="!isMobile">
        <div class="contol-panel" v-if="scollBtn" @click="scoll('right')">
          <van-icon
            name="arrow"
            style="margin-left: 2px"
            :color="isRight ? '#676766' : '#c8c9cc'"
          />
        </div>
      </div>
    </div>
    <Loading v-show="loading" />
    <Nodata v-show="productList.length == 0 && !loading" />
    <van-pagination
      v-model="page"
      :total-items="total"
      :items-per-page="pageSize"
      :show-page-size="5"
      class="col-sm-12 col-md-8 col-lg-6 col-xl-4"
      v-if="total > pageSize && !loading"
      @change="pageChange"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>
  </div>
</template>
<script>
import tool from "@/common/tool.js";
export default {
  name: "ProdulistLine",
  data() {
    return {
      tool,
      isLeft: false, //true:可以点击向左按钮
      isRight: true, //true:可以点击向右按钮
      isCollection: false,
    };
  },
  props: {
    productList: {
      type: Array,
      default() {
        return [];
      },
    },
    total: {
      type: Number,
      default: 0,
    },
    page: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 20,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    //是否显示左右滚动按钮
    scollBtn: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    //鼠标经过
    proOver(item, index) {
      console.log(item);
      if (item.imgs.length > 1) {
        this.productList[index].status = "hover";
        // this.$nextTick(() => {
        //   setTimeout(() => {
        //     this.productList[index].pic = item.imgs[1];
        //   }, 100);
        //   // setTimeout(() => {
        //   //   this.productList[index].pic = item.imgs[0];
        //   // }, 3000);
        // });
      }
    },
    //鼠标移除
    proOut(item, index) {
      if (item.imgs.length > 1) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.productList[index].pic = item.imgs[0];
          }, 1000);
        });
      }
    },
    //滚动:left向左,right向右
    scoll(dis) {
      if (dis == "left") {
        this.isRight = true;
        let clientWidth = this.$refs["product-panel"][0].clientWidth;
        let scrollLeft = this.$refs.pageNav.scrollLeft;
        let p = 0;
        let timer = setInterval(() => {
          p += 3;
          this.$refs.pageNav.scrollLeft = scrollLeft - p;
          if (p >= clientWidth) {
            clearInterval(timer);
          }
        }, 1);
        setTimeout(() => {
          this.$nextTick(() => {
            let scrollLeft2 = this.$refs.pageNav.scrollLeft; //滚动框距离左侧距离
            if (scrollLeft2 == 0) {
              this.isLeft = false;
            }
          });
        }, 500);
      } else if (dis == "right") {
        this.isLeft = true;
        let proWidth = this.$refs["product-panel"][0].clientWidth; //单个产品框宽度，
        let scrollLeft = this.$refs.pageNav.scrollLeft; //滚动框距离左侧距离
        let p = 0;
        let timer = setInterval(() => {
          p += 3;
          this.$refs.pageNav.scrollLeft = scrollLeft + p;
          if (p >= proWidth) {
            clearInterval(timer);
          }
        }, 1);
        setTimeout(() => {
          this.$nextTick(() => {
            let scrollLeft2 = this.$refs.pageNav.scrollLeft; //滚动框距离左侧距离
            let panelWidth = this.$refs.pageNav.clientWidth; //面板显示宽度
            let scrollWidth = this.$refs.pageNav.scrollWidth; //面板实际宽度
            if (scrollLeft2 + panelWidth == scrollWidth) {
              this.isRight = false;
            }
          });
        }, 500);
      }
    },
    //收藏商品
    async proCollection(index) {
      this.tips.startLoadingToast();
      let res = await this.$store.dispatch("menu/proCollection", {
        id: this.productList[index].id,
      });
      this.tips.closeToast();
      if (res.code == 0) {
        this.$toast("Collection success");
        this.$store.dispatch("user/collectionList", {
          page: 1,
          page_size: 100000,
        }); //获取收藏列表
      } else {
        this.$toast.fail(res.msg);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.product {
  width: 100%;
  clear: both;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 2rem;
  padding-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .product-frame {
    width: 100%;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
  }
  .contol-frame {
    width: 10%;
    min-width: 1.6rem;
    clear: both;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #676766;
    .contol-panel {
      cursor: pointer;
      width: 1.7rem;
      height: 1.7rem;
      border-radius: 4rem;
      display: flex;
      font-size: 0.8rem;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
    }
    .contol-panel:hover {
      color: #969799;
    }
  }
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .product-frame-panel {
    flex: 1;
    clear: both;
    display: flex;
    overflow-x: auto;

    .product-panel {
      min-width: 50%;
      width: 310px;
      max-width: 50%;
      min-height: 4rem;
      clear: both;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 0.6rem;
      padding: 0 0.3rem;
      .product-fast {
        width: 100%;
        clear: both;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        cursor: pointer;
      }

      .product-img {
        width: 80%;
        padding: 112% 0 0;
        position: relative;
        .img {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .icon {
          position: absolute;
          top: 0.2rem;
          right: 0.2rem;
          color: #8c8c8c;
        }

        .discount-frame {
          position: absolute;
          top: 0.5rem;
          left: 0;
          clear: both;
          .discount-panel {
            height: 1rem;
            clear: both;
            background: #e38cff;
            border-radius: 0 2rem 2rem 0;
            color: #fff;
            font-size: 0.6rem;
            padding: 0 0.25rem;
            line-height: 1rem;
            display: flex;
            font-family: "Helvetica";
            align-items: center;
            background: #e38cff;
          }
          .discount-label {
            margin-top: -0.08rem;
          }
          .discount {
            margin-left: 0.2rem;
          }
        }
      }

      .product-main {
        width: 80%;
        clear: both;
        text-align: center;
        .product-title {
          width: 100%;
          min-height: 1.2rem;
          clear: both;
          margin-top: 0.3rem;
          margin-bottom: 0px;
          font-size: 0.5rem;
          line-height: 0.6rem;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          font-family: "BTBlack";
          color: #000;
        }

        .product-price {
          width: 100%;
          clear: both;
          font-size: 0.4rem;
          font-size: 0.4rem;
          margin-bottom: 0;
          font-weight: bold;
          color: #000;
        }
      }
      .btn-frame {
        width: 100%;
        clear: both;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.5rem;
        .btn-panel {
          min-width: 50%;
          width: 6rem;
          max-width: 100%;
          min-height: 1.4rem;
          padding: 0.2rem;
          clear: both;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.5rem;
          line-height: 0.5rem;
          border: 1px solid #969799;
          color: #000;
          font-family: "BTBlack";
          text-align: center;
        }
      }
    }
  }
}
</style>